<template>

  <div class="discussion" v-if="discussion.length > 0">
    <header class="title">讨论</header>


    <ul class="question-list">
      <li class="question" v-for="(question, index) in discussion" :key="index">
        <div class="title">{{ question.question.content }}</div>
        <div class="answer-count">{{ question.question.answerCnt }}个讨论</div>

        <div class="answer">{{ question.answer.content }}</div>


      </li>
    </ul>




  </div>
  <van-button block hairline plain v-if="discussion.length > 0">
    打开App，查看全部{{ props.movieQuestions.total }}个讨论

    <van-icon name="arrow" />
  </van-button>
</template>


<script setup>

import { computed } from 'vue';
const props = defineProps({

  movieQuestions: {
    type: Object,
  }
});

const discussion = computed(() => {
  return props.movieQuestions.questions
})



</script>










<style scoped>
.discussion {
  margin-top: 10px;
  background-color: #fff;
  padding: 0 10px;
}

.discussion .title {
  font-size: 15px;
  color: #333;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.question-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.question-list .question {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.question-list .question:last-child {
  border-bottom: none;
}

.question-list .question .title {
  border-bottom: none;
  font-size: 17px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-weight: 700;
  padding: 0;
}

.question-list .question .answer-count {
  margin-top: 2px;
  font-size: 12px;
  color: #666;
}

.question-list .question .answer {
  margin-top: 10px;
  font-size: 13px;
  color: #666;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

:deep(.van-button__text) {
  color: #e54847;
}
</style>
